<template>
  <!-- -->
  <div class="root">
    <!-- 头部 -->
    <div class="login">
      <van-nav-bar
        title="密码登录"
        left-arrow
        @click-left="$router.push('/my')"
      />
    </div>
    <!-- 内容 -->
    <div class="content">
      <van-cell-group>
        <van-field
          label="用户名"
          placeholder="请输入用户名"
          v-model="user.username"
        />
        <van-field
          center
          clearable
          label="密码"
          v-bind:type="password"
          placeholder="请输入密码"
          v-model="user.password"
        >
          <template #button>
            <van-switch v-model="checked" @change="buttonfn" />
          </template>
        </van-field>
      </van-cell-group>

      <van-swipe-cell>
        <template #left>
          <van-button square type="primary" text="选择" />
        </template>
        <div class="code">
          <input type="text" placeholder="请输入验证码" />
          <img :src="user.captcha_code" alt="" />
          <span @click="vaguefn"> <a href="#">看不清换一张?</a></span>
        </div>
      </van-swipe-cell>
    </div>

    <h3>
      温馨提示：未注册过的账号，登录时将自动注册 注册过的用户可凭账号密码登录
    </h3>
    <van-button type="primary" block round @click="loginfn">登录</van-button>
    <!-- <div class="pwd">
      <a href="#" @click="$router.push('/personal')">重置密码？</a>
    </div> -->
    <van-button type="warning" block round @click="$router.push('/reset')"
      >重置密码</van-button
    >
  </div>
</template>
<script>
import { login, captchas } from "../api/user";
export default {
  data() {
    return {
      user: {
        username: "", //用户名
        password: "", //密码
        captcha_code: "", //验证码
      },
      password: "password",
      checked: false,
    };
  },
  created() {
    captchas().then((res) => {
      console.log(57, res);
      this.user.captcha_code = res.data.code;
      console.log(this.user.captcha_code);
    });
  },
  methods: {
    buttonfn() {
      if (this.checked == true) {
        this.password = "text";
      } else {
        this.password = "password";
      }
    },
    // 更新验证码图片
    vaguefn() {
      captchas().then((res) => {
        this.user.captcha_code = res.data.code;
      });
    },
    loginfn() {
      // // 登录页面
      login(this.user).then((res) => {
        if (!this.user.username || !this.user.password) {
          this.$toast.fail("用户名跟密码不能为空");
          return;
        }
        // console.log(64, res);
        if (res.data.message == "密码错误") {
          this.$toast.success(res.data.message);
          return;
        } else {
          // 123456789
          // 123456
          this.$toast.success(res.data.message);
          localStorage.setItem("ele-68", res.data.token);
          // localStorage.setItem("ele-68-id", res.data.id);
          this.$router.push("/hom");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar {
  background-color: #3190e8;
  .van-nav-bar__title {
    color: #fff;
  }
  .van-nav-bar__arrow {
    color: #fff;
  }
}
.code {
  display: flex;
  background-color: #fff;
  span {
    margin-left: 10px;
    a {
      color: #000;
    }
  }

  input {
    width: 80%;
    border: none;
    margin-bottom: 20px;
  }
}
h3 {
  margin-top: 20px;
  line-height: 20px;
  color: red;
  background-color: #f5f5f5;
}
.pwd {
  display: flex;
  text-align: center;
  margin: 20px auto;
  a {
    text-decoration: none;
    color: rgb(119, 129, 216);
  }
}
.content {
  margin-top: 20px;
}
.root {
  background-color: #f5f5f5;
}
.van-button {
  margin-top: 20px;
  margin-bottom: 10px;
}
</style>